<template>
  <el-dialog :visible.sync="innerVisible" width="1000px" @close="handleClose">
    <span slot="title">编辑</span>

    <div class="dialog-body" style="max-height: 600px; overflow-y: auto;">
      <el-form :model="editData" label-width="160px">
        <el-row :gutter="20">
          <el-col :span="12" v-for="field in fields" :key="field.prop">
            <el-form-item :label="field.label">
              <el-input v-model="editData[field.prop]" :placeholder="'请输入 ' + field.label" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="innerVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "zoomeyeEdit",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      innerVisible: this.visible,
      editData: {},
      fields: [
        { label: 'IP 地址：', prop: 'ip' },
        { label: '端口号：', prop: 'port' },
        { label: 'URL：', prop: 'url' },
        { label: '服务：', prop: 'service' },
        { label: '协议（传输层）：', prop: 'protocol_transport' },
        { label: '协议探测信息：', prop: 'protocol_probe' },
        { label: '协议（应用层）：', prop: 'protocol_application' },
        { label: 'HTTP 标题：', prop: 'http_title' },
        { label: '网页标题信息：', prop: 'title' },
        { label: 'Web 应用名称：', prop: 'webapp_name' },
        { label: 'Web 应用版本：', prop: 'webapp_version' },
        { label: 'Web 应用官网：', prop: 'webapp_url' },
        { label: '组件名称：', prop: 'component_name' },
        { label: '组件版本：', prop: 'component_version' },
        { label: '产品名称：', prop: 'product' },
        { label: '版本信息：', prop: 'version' },
        { label: '数据库名称：', prop: 'db_name' },
        { label: '数据库版本：', prop: 'db_version' },
        { label: '设备类型：', prop: 'device' },
        { label: '系统名称：', prop: 'system_name' },
        { label: '系统发行版：', prop: 'system_distrib' },
        { label: '系统版本：', prop: 'system_release' },
        { label: '操作系统：', prop: 'os' },
        { label: '系统中文名：', prop: 'system_chinese' },
        { label: '服务器名称：', prop: 'server_name' },
        { label: '服务器版本：', prop: 'server_version' },
        { label: '服务器中文名：', prop: 'server_chinese' },
        { label: 'WAF 名称：', prop: 'waf_name' },
        { label: 'WAF 版本：', prop: 'waf_version' },
        { label: 'Banner 信息：', prop: 'banner' },
        { label: '指纹信息：', prop: 'fingerprint' },
        { label: 'JARM 指纹：', prop: 'jarm' },
        { label: '额外信息：', prop: 'extrainfo' },
        { label: 'rdns：', prop: 'rdns' },
        { label: 'hostname：', prop: 'hostname' },
        { label: '地理纬度：', prop: 'lat' },
        { label: '地理经度：', prop: 'lon' },
        { label: '城市（中文）：', prop: 'city_name_CN' },
        { label: '城市（英文）：', prop: 'city_name_EN' },
        { label: '城市 geoname_id：', prop: 'city_geoname_id' },
        { label: '行政区（中文）：', prop: 'subdivisions_name_CN' },
        { label: '行政区（英文）：', prop: 'subdivisions_name_EN' },
        { label: '行政区代码：', prop: 'subdivisions_code' },
        { label: '行政区 geoname_id：', prop: 'subdivisions_geoname_id' },
        { label: '国家（中文）：', prop: 'country_name_CN' },
        { label: '国家（英文）：', prop: 'country_name_EN' },
        { label: '国家代码：', prop: 'country_code' },
        { label: '国家 geoname_id：', prop: 'country_geoname_id' },
        { label: '大洲（中文）：', prop: 'continent_name_CN' },
        { label: '大洲（英文）：', prop: 'continent_name_EN' },
        { label: '大洲代码：', prop: 'continent_code' },
        { label: '大洲 geoname_id：', prop: 'continent_geoname_id' },
        { label: '运营组织（英文）：', prop: 'organization' },
        { label: '运营组织（中文）：', prop: 'organization_CN' },
        { label: 'ISP（运营商）：', prop: 'isp' },
        { label: 'IDC 信息：', prop: 'idc' },
        { label: '基站信息：', prop: 'base_station' },
        { label: 'ASN：', prop: 'asn' },
        { label: 'ASO：', prop: 'aso' },
        { label: '网站关键词：', prop: 'keywords' },
        { label: '描述信息：', prop: 'description' },
        { label: '备注信息：', prop: 'remark' },
        { label: '资源类型：', prop: 'resourceType' },
        { label: 'SSL 信息：', prop: 'ssl' },
        { label: 'PoweredBy：', prop: 'PoweredBy' },
        { label: 'surveying_time：', prop: 'surveying_time' },
        { label: 'headers：', prop: 'headers' }
      ],
    };
  },
  watch: {
    visible(val) {
      this.innerVisible = val;
      if (val) {
        this.editData = JSON.parse(JSON.stringify(this.formData)); // 深拷贝，防止污染
      }
    },
    innerVisible(val) {
      this.$emit('update:visible', val);
    },
  },
  methods: {
    handleSubmit() {
      this.$emit('submit-zoomeyeOne', this.editData);
      this.innerVisible = false;
    },
    handleClose() {
      this.innerVisible = false;
    },
  },
};
</script>
